<template>
  <div class="order-detail-container">
    <!-- 商品列表 -->
    <van-card v-for="item in order.orderItemList" :key="item.id" :num="item.count" :price="item.price"
              :title="item.goodsName" :desc="item.goodsSpec" :thumb="$fullUrl(item.goodsImg)"/>

    <!-- 订单备注 -->
    <van-cell title="订单备注" :value="order.note" label=""/>

    <!-- 配送信息 -->
    <van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货"/>
    <!-- 收货地址 -->
    <van-cell title="收货地址">
      <template #label>
        <div>{{ order.addressName }} {{ order.addressTel }}</div>
        <div>{{ order.addressDetail }}</div>
      </template>
    </van-cell>

    <!-- 金额信息 -->
    <van-cell title="总金额" :value="'¥' + order.amount.toFixed(2)" value-class="money"/>

    <!-- 去支付、取消按钮 -->
    <div v-if="order.id && order.status==0">
      <van-button type="primary" size="large" @click="handlePay">去支付</van-button>
      <van-button type="danger" size="large" @click="handleCancel">取消订单</van-button>
    </div>
  </div>
</template>

<script>
import * as OrderAPI from "@/api/order.js";

export default {
  data() {
    return {
      order: {
        orderItemList: [],
        amount: 0,
      },
    };
  },
  props: {
    id: {
      type: [Number, String],
    }
  },
  created() {
    this.getOrder();
  },
  methods: {
    getOrder() {
      OrderAPI.getDetailById(this.id).then(result => {
        this.order = result.data;
      });
    },

    handlePay() {
      this.$toast('还未实现....');
    },

    //取消订单 状态(0待支付/1已支付/2已发货/3交易成功/-1已取消)
    handleCancel() {
      OrderAPI.updateStatus(this.id, -1).then(() => {
        this.$toast("订单已取消");
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      });
    },

  },
};
</script>

<style lang="less" scoped>
.van-card {
  margin: 10px;
  border-radius: 10px;
  border: 2px solid lightgrey;
  background-color: white;
}

.van-card__content {
  justify-content: space-evenly;
}

.van-card__title {
  font-size: 14px;
}

.van-card__num {
  font-size: 14px;
  color: black;
}

.money {
  color: red;
  font-weight: bolder;
}
</style>
